<template>
  <div class="tabs-control">
    <el-form ref="editableForm" :model="form" label-width="90px" class="qrcodes-form" label-position="right">
      <el-tabs v-model="editableTabsValue" type="card" editable @edit="handleTabsEdit">
        <el-tab-pane :key="item.name" v-for="(item, index) in editableTabs" :label="`时段${index+1}`" :name="item.name">
          <el-form-item label="展示周期：" class="form-item" v-if="showTimer">
            <el-checkbox-group v-model="item.weeks">
              <el-checkbox :label="week.value" name="type" v-for="(week, index) in weekList" :key="index">
                <span>{{ week.label }}</span>
              </el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="展示时间：" class="form-item" v-if="showTimer">
            <el-time-picker
              is-range
              v-model="item.timeRange"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              placeholder="选择时间范围"
              style="width: 236px;"
            >
            </el-time-picker>
          </el-form-item>
          <el-form-item label="成员：" class="form-item" v-if="showAccount">
            <checkAccountDialog></checkAccountDialog>
          </el-form-item>

        </el-tab-pane>
      </el-tabs>
    </el-form>
    <EditorPro v-if="isShowEditor"/>
    <!--  <CheckAccountDialog :visible="isShowAccount" @onHandleClose="onHandCloseCheckAccountDialog" />-->
  </div>
</template>
<script>
import EditorPro from '@/components/EditorPro';
import CheckAccountDialog from './checkAccountDialog'

export default {
  data() {
    return {
      editableTabsValue: '1',
      editableTabs: [{
        title: '时段1',
        name: '1',
        weeks: [],//
        timeRange: [],//时间展示
      }],
      tabIndex: 1,
      form: {},
      weekList: [
        {value: '1', label: '周一'},
        {value: '2', label: '周二'},
        {value: '3', label: '周三'},
        {value: '4', label: '周四'},
        {value: '5', label: '周五'},
        {value: '6', label: '周六'},
        {value: '7', label: '周日'},
      ],
      isShowAccount: false,
    }
  },
  components: {
    EditorPro,
    CheckAccountDialog
  },
  props: {
    isShowEditor: {
      type: Boolean,
      default: false
    },
    showTimer: {
      type: Boolean,
      default: false
    },
    showAccount: {
      type: Boolean,
      default: false
    },
  },
  methods: {
    handleTabsEdit(targetName, action) {
      if (action === 'add') {
        let newTabName = ++this.tabIndex + '';
        this.editableTabs.push(this.showTimer ? {
          title: `时段${newTabName}`,
          name: newTabName,
          weeks: [],
        } : {
          title: `时段${newTabName}`,
          name: newTabName,
        });
        this.editableTabsValue = newTabName;
      }
      if (action === 'remove') {
        let tabs = this.editableTabs;
        let activeName = this.editableTabsValue;
        if (activeName === targetName) {
          tabs.forEach((tab, index) => {
            if (tab.name === targetName) {
              let nextTab = tabs[index + 1] || tabs[index - 1];
              if (nextTab) {
                activeName = nextTab.name;
              }
            }
          });
        }

        this.editableTabsValue = activeName;
        this.editableTabs = tabs.filter(tab => tab.name !== targetName);
      }
    },
    onHandCloseCheckAccountDialog() {
      this.isShowAccount = false
    }
  }
}
</script>

<style lang="scss" scoped>
.tabs-control {
  ::v-deep .el-tabs__header {
    margin-bottom: 0px;
  }

  ::v-deep .el-tabs__content {
    border: 1px solid #dfe4ed;
    border-top: 0px;
    padding: 20px;
  }

  ::v-deep .el-form-item--medium .el-form-item__content {
    margin-bottom: 12px;
  }
}
</style>
